<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
    <script src="ele-2.15.7/index.js"></script>
    <script src="js/jquery-1.9.0.js"></script>
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="css/index-z.css" />
    <!--跑马灯标题-->
</head>
<body>
<!--主页面-->
<div id="app">
    <!--    固定的menu-->
    <div id="header" class="head-one">
        <a class="logoname">ThreeGays</a>
        <i  class="el-icon-user"
            style="margin-right: 20px;"></i>
        <a href="shoppingcart.html" title="我的购物车"><i  class="el-icon-shopping-cart-1"></i>'</a>
        <!--        <div style=""></div>-->
        <i class="el-icon-search" @click="show0 =!show0,show00=false"></i>
        <transition name="el-zoom-in-center">
            <div class="search"
                 @click="show0=true,show00=!show00" v-show="show0">
                <input type="text" class="search-ipt" placeholder="探索新世界"/>
            </div>
        </transition>
    </div>
    <!--    顶部底色-->
    <div class="top"></div>
    <!--    搜索menu-->
    <transition name="el-zoom-in-top">
        <div v-show="show00" class="menudiv0" @click="show00=false,show0=false">
            <ul>
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">热门搜索</li>
                <li><i  class="el-icon-right"></i><a href="">HUAWEI P60 Art</a></li>
                <li><i  class="el-icon-right"></i><a href="">iPhone14 Pro Max</a></li>
                <li><i  class="el-icon-right"></i><a href="">AirPods Pro</a></li>
                <li><i  class="el-icon-right"></i><a @click="show2 = true,show00=false">phone</a></li>
                <li><i  class="el-icon-right"></i><a href="">配件</a></li>
            </ul>
        </div>
    </transition>
</div>
<!--js-->
<script type="text/javascript">


</script>
<!--vue-->
<script>
    var v = new Vue({
        el: "#app",
        data: {
            show00 : false,
            show0: false,
            show1: false,
            show2: false,
            show3: false,
            show4: false,
            show5: false,
        }
    })
</script>

</body>

<!--基础css-->
<style>
    table {
        border-spacing: 0px;
    }
    * {
        margin: 0;
        padding: 0;
    }
    #app{
        width: 100%;
    }
    .el-header{
        height: 40px;
    }
    .el-main{
        height: 100%;
    }
    .containter{
        height: 1000px;
        width: 100%;
        background-color: black;
    }
    .footer {
        height: 100px;
        width: 100%;
        background-color: #ddd;
    }
    html,body,#app{
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .el-container{
        height: 80%;
    }
    tr:hover {
        background-color: #c6e2ff;
    }
</style>

</html>
